<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入 - layuiAdmin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/ehome/static/css/layui.css" media="all">

    <style>
        body{
            background-color: lightgray;
        }
        h2{
            text-align: center;
            margin:30px auto;
            color:darkgray;
            line-height: 60px;
        }

        div.layadmin-user-login-main{
            width: 60%;
            margin: 0 auto;
            background-color: white;
        }
        .ehome-input{
            float:left;
            width:85%;
            margin-left: 20px;

        }
        .ehome-input-label{
            display: block;
            float:left;
            height: 36px;
            width: 30px;
            line-height: 36px;
            margin-left: -28px;
        }
    </style>
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="width:600px;margin: 200px auto;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>管理员登录</h2>
        </div>
        <!--用户名输入框部分-->
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <input type="text" name="username" id="username" lay-verify="required" placeholder="用户名" class="layui-input ehome-input" maxlength="20" value="">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username ehome-input-label" for="username" id="usernameLabel"></label>
            </div>
            <!--用户密码输入框部分-->
            <div class="layui-form-item">

                <input type="password" name="password" id="password" lay-verify="required" placeholder="密码" class="layui-input ehome-input"  maxlength="20" value="">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password ehome-input-label" for="password"  id="passwordLabel"></label>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
            </div>

        </div>
    </div>



</div>

<!--layui的js部分-->
<script src="/ehome/static/layui.js"></script>
<script src="/ehome/static/js/jquery-3.4.1.min.js"></script>

<script>
    //单独引入jQuery
    $(function(){


        //实现点击切换验证码, 这里有个技巧,图片点击实现切换的前提,是必须保证每次产生的地址不同,利用地址中的参数:  localhost:8080/code?随机数
       /* $("#code_img").click(function(){
            $(this).attr("src","");
        });*/
    });

    layui.use(['form', 'jquery'], function(){
        $ = layui.jquery
                ,layer = layui.layer
                ,form = layui.form
                ,router = layui.router()
                ,search = router.search;


        form.render();   // 执行表单渲染

        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){
            $.ajax({
                type : "post",  //提交方式
                dataType: 'json',
                // url : "/login.do",//路径
                // url:"/ehome/user/login/username/admin/password/123123",//提交到UserController的login
                 url:"/ehome/user/login2",
                // data : obj.field, //数据，这里使用的是Json格式进行传输  JSON.stringify(obj.field)
               // 因为springMVC使用了jackson作为json格式数据的解析第三方工具 所以必须转格式
                data:JSON.stringify(obj.field),
                contentType:"application/json",
                success : function(res) {//返回数据根据结果进行相应的处理
                    console.log(res);
                    /*if(res.msg=='1'){
                        location.href = "index.html"; // 验证成功跳转的地址
                    }
                    if(res.msg=='2'){
                        layer.msg('用户名或密码错误', {icon:5, shade:[0.5, '#000000'], shadeClose:true});
                        return false;
                    }
                    if(res.msg=='3'){
                        layer.msg('验证码错误', {icon:5, shade:[0.5, '#000000'], shadeClose:true});
                        return false;
                    }*/
                }
            });

        });

    });
</script>
</body>
</html>